<div class="view">
  <div class="container">
    <div class="row justify-content-md-center">
      <div class="col-6">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" [class.active]="isStandLogin()" (click)="setActiveTab('STANDARD')">Standard</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" *ngIf="authenticationProviders && authenticationProviders.includes('LDAP')" [class.active]="isLdapLogin()" (click)="setActiveTab('LDAP')">LDAP</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" *ngIf="authenticationProviders && authenticationProviders.includes('SSO')" [class.active]="isSsoLogin()" (click)="setActiveTab('SSO')">SSO</a>
          </li>
        </ul>
        <header>
          <h3> {{ authName |  titlecase }} Login</h3>
        </header>
        <br />
        <form [formGroup]="loginForm" (ngSubmit)="submit(loginForm)" class="login-form" novalidate>
          <div class="login">
            <div class="row" *ngIf="!isSsoLogin()">
              <div class="col-md-2">
                Username:
              </div>
              <div class="col-md-10">
                <input type="username" name="username" id="username" class="form-control" formControlName="username" />
                <div class="alert alert-danger" [hidden]="loginForm.controls.username.untouched || loginForm.controls.username.valid">
                  A valid username address is required
                </div>
              </div>
            </div>
            <br />
            <div class="row" *ngIf="!isSsoLogin()">
              <div class="col-md-2">
                Password:
              </div>
              <div class="col-md-10">
                <input type="password" name="password" id="password" class="form-control" formControlName="password" autocomplete="on"/>
                <div class="alert alert-danger" [hidden]="loginForm.controls.password.untouched || loginForm.controls.password.valid">
                  Password is required (6 or more characters with at least one number)
                </div>
              </div>
            </div>
            <br />
            <div class="row">
              <div class="col-md-12">
                <button type="submit" class="btn btn-success" [disabled]="!loginForm.valid && !isSsoLogin()">{{loginBtnName()}}</button>
              </div>
            </div>
            <br />
            <div class="statusRow">
              <br />
              <div *ngIf="errorMessage && !isSsoLogin()" class="alert alert-danger">{{ errorMessage }}</div>
            </div>
            <div class="gap text-center" [hidden]="!isStandLogin()">
              <p>Don't have an account?</p>
              <div class="btn btn-link btn-wide"
                   (click)="signUp()" >
                <span class="fa fa-lg fa-key"></span>
                Sign up
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
